<template>
	<view class="bigView">
		<view class="topView">
			<view v-for="(item,index) in indexList" :key="index" class="topItem" @click="tabHandle(index)">
				<view class="tabName" :style="[{color:index==currentIndex?'#247BFD':'#7E7E7E'}]">{{item.name}}</view>
				<view class="bottomLine" :style="[{backgroundColor:index==currentIndex?'#247BFD':'transparent'}]"></view>
			</view>
		</view>
		<view class="centerView" v-if="currentIndex==0">
			<view class="realAuth" >
				<view class="uploadPic">
					<view class="uploadTitle">
						<view class="leftLine"></view>
						<view style="margin-left: 10px;">上传身份证照片</view>
					</view>
					<view class="statement">声明：商服签获取的身份证照片仅作为实名认证使用。</view>
					<view class="cardView">
						<view class="left">
							<u-upload
								:fileList="fileList6"
								@afterRead="afterRead"
								@delete="deletePic"
								name="6"
								multiple
								:maxCount="1"
							>
								<image src="../../../static/img/dcjy/upload_1.png"
								mode="widthFix" class="placeholderImg"></image>
							</u-upload>
							<view class="placeholderText">上传身份证人像面</view>
						</view>
						<view class="right">
							<u-upload
								:fileList="fileList6"
								@afterRead="afterRead"
								@delete="deletePic"
								name="6"
								multiple
								:maxCount="1"
							>
								<image src="../../../static/img/dcjy/upload_2.png"
								mode="widthFix" class="placeholderImg"></image>
							</u-upload>
							<view class="placeholderText">上传身份证国徽面</view>
						</view>
					</view>
					<view class="line"></view>
					<view style="font-size: 16px;font-weight: bold;margin-top: 16px;">身份证拍摄要求</view>
					<view style="font-size: 12px;color: #999999;line-height: 1.5;margin-top: 8px;">大陆公民持有的本人有效二代身份证；<br>拍摄时请确保身份证
						<label style="color: red;">边框完整、字体清晰、亮度均匀</label>
					</view>
				</view>
				<view class="uploadPic" style="margin-top: 8px;padding-bottom: 0;">
					<view class="uploadTitle">
						<view class="leftLine"></view>
						<view style="margin-left: 10px;">身份信息</view>
					</view>
					<view class="itemInput" style="margin-top: 8px;">
						<view class="leftLabel">姓名</view>
						<u--input class="customInput" placeholder="请填写姓名" border="surround" v-model="name"	
						inputAlign="right"></u--input>
					</view>
					<view class="itemInput">
						<view class="leftLabel">身份证号</view>
						<u--input class="customInput" placeholder="请填写身份证号" border="surround" v-model="name"	
						inputAlign="right"></u--input>
					</view>
					<view class="itemInput" style="border-bottom: rgba(0,0,0,0.08) 0px solid;">
						<view class="leftLabel">联系电话</view>
						<u-input placeholder="请填写联系电话" border="surround" v-model="name"	
						inputAlign="right">
							<template slot="suffix">
								<u-code
									ref="uCode"
									@change="codeChange"
									seconds="60"
									changeText="X秒重新获取"
								></u-code>
								<u-button
									@tap="getCode"
									:text="tips"
									type="success"
									size="mini"
								></u-button>
							</template>
						</u-input>
					</view>
					<view class="phoneTip">
						请确保联系电话为个人实名的手机号
					</view>
					<view class="line"></view>
					<view class="itemInput" style="border-bottom: transparent;">
						<view class="leftLabel">验证码</view>
						<u--input class="customInput" placeholder="请填写验证码" border="surround" v-model="name"	
						inputAlign="right"></u--input>
					</view>
				</view>
			</view>
			<view class="bottomView" :style="[{height:bottom + 'px'}]">
				<view class="sure" @click="sureHandle">提交认证</view>
			</view>
		</view>
		<view class="centerView" v-if="currentIndex==1">
			<view class="realAuth" >
				<view class="uploadPic">
					<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
				</view>
			</view>
			<view class="bottomView" :style="[{height:bottom + 'px'}]">
				<view class="sure" @click="sureHandle">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		components:{
			
		},
		data(){
			return {
				bottom:0,
				currentIndex:0,
				fileList6: [],
				tips: '',
				value1:'',
				indexList:[
					{ index:0, name:'实名认证' },
					{ index:1, name:'建议意见' },
					{ index:2, name:'工会互助金' },
				]
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
		},
		methods:{
			sureHandle(){
				uni.showModal({
					title: this.value+":"+this.phone
				})
			},
			tabHandle(index){
				this.currentIndex = index;
			},
			// 删除图片
			deletePic(event) {
			// 	this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				// let lists = [].concat(event.file)
				// let fileListLen = this[`fileList${event.name}`].length
				// lists.map((item) => {
				// 	this[`fileList${event.name}`].push({
				// 		...item,
				// 		status: 'uploading',
				// 		message: '上传中'
				// 	})
				// })
				// for (let i = 0; i < lists.length; i++) {
				// 	const result = await this.uploadFilePromise(lists[i].url)
				// 	let item = this[`fileList${event.name}`][fileListLen]
				// 	this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
				// 		status: 'success',
				// 		message: '',
				// 		url: result
				// 	}))
				// 	fileListLen++
				// }
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
				  // 模拟向后端请求验证码
				  uni.showLoading({
					title: '正在获取验证码'
				  })
				  setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				  }, 2000);
				} else {
				  uni.$u.toast('倒计时结束后再发送');
				}
			},
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
	$faceWidth: 100vw;
	.bigView{
		width: $faceWidth;
		height: 100vh;
		background-color: #F7F7F7;
		display: flex;
		flex-direction: column;
	}
	.topView{
		width: $faceWidth;
		height: 42px;
		background-color: white;
		display: flex;
		flex-direction: row;
		.topItem{
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.tabName{
				height: 41px;
				width: 100%;
				// background-color: whi;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bottomLine{
				height: 2px;
				width: 50%;
				width: 20px;
				background-color: #247BFD;
			}
		}
	}
	.centerView{
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}
	.realAuth{
		flex-grow: 1;
		.uploadPic{
			width: 100vw;
			display: flex;
			flex-direction: column;
			background-color: white;
			padding: 16px;
			.uploadTitle{
				display: flex;
				flex-direction: row;
				align-items: center;
				// margin-top: 16px;
				// margin-left: 16px;
				.leftLine{
					width: 4px;
					background-color: #247BFD;
					height: 14px;
					border-radius: 2px;
				}
			}
			.statement{
				color: #999999;
				font-size: 12px;
				margin-top: 4px;
			}
			.cardView{
				width: calc(100vw - 32px);
				margin-top: 16px;
				display: flex;
				flex-direction: row;
				.left{
					width: calc((100vw - 48px) / 2);
					display: flex;
					flex-direction: column;
					text-align: center;
					.placeholderImg{
						width: calc((100vw - 48px) / 2);
						height: 150px;
					}
				}
				.right{
					width: calc((100vw - 48px) / 2);
					margin-left: 16px;
					display: flex;
					flex-direction: column;
					text-align: center;
					.placeholderImg{
						width: calc((100vw - 48px) / 2);
						height: 150px;
					}
				}
				.placeholderText{
					color: #999999;
					font-size: 12px;
					margin-top: 8px;
				}
			}
			.line{
				height: 1px;
				width: calc(100vw - 32px);
				background-color: rgba(0,0,0,0.08);
				margin-top: 20px;
			}
		}
		.auth{
			width: 100vw;
			display: flex;
			background-color: white;
			padding: 16px;
		}
	}
	.itemInput{
		display: flex;
		flex-direction: row;
		height: 51px;
		background-color: white;
		align-items: center;
		width: calc(100vw - 32px);
		border-bottom: rgba(0,0,0,0.08) 1px solid;
	}
	.phoneTip{
		display: flex;
		width: calc(100vw - 32px);
		min-height: 29px;
		font-size: 12px;
		color: #999999;
		background-color: rgba(0,0,0,0.04);
		align-items: center;
		padding-left: 8px;
	}
	.leftLabel{
		padding-left: 16px;
	}
	.bottomView{
		height: 150px;
		width: 100vw;
		// background-color: yellow;
		display: flex;
		justify-content: center;
		.sure{
			width: calc(100vw - 32px);//calc(100vw-#{32px});
			height: 48px;
			border-radius: 24px;
			background-color: #247BFD;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
		}
	}
	
</style>